<template>
  <CollapsibleSection
    title="过敏防治"
    :is-expanded="isExpanded"
    @toggle="$emit('toggle')"
  >
    <ItemListManager
      :items="formData.allergyItems || []"
      item-title="过敏史项目"
      add-button-text="添加过敏史项目"
      add-button-color="#f44336"
      @add="addAllergyItem"
      @remove="removeAllergyItem"
      @update="updateAllergyItem"
    >
      <template #default="{ item, index, update }">
        <ItemWithImagesCard
          :model-value="item"
          @update:model-value="(data) => update(index, data)"
          :show-title="true"
          title-label="过敏类型"
          title-placeholder="请输入过敏类型"
          description-label="过敏详情"
          description-placeholder="请输入过敏详情"
          :description-rows="2"
          border-color="border-red-300"
        />
      </template>
    </ItemListManager>
  </CollapsibleSection>
</template>

<script setup lang="ts">
import { useItemManagement } from '@/composables/useItemManagement'
import CollapsibleSection from '@/components/CollapsibleSection.vue'
import ItemListManager from '@/components/ItemListManager.vue'
import ItemWithImagesCard from '@/components/ItemWithImagesCard.vue'

interface Props {
  isExpanded: boolean
}

interface Emits {
  (e: 'toggle'): void
}

defineProps<Props>()
defineEmits<Emits>()

const { formData, addAllergyItem, removeAllergyItem, updateAllergyItem } = useItemManagement()
</script>

<style scoped lang="scss">
// 样式已在模板中定义
</style>
